<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>设备列表首页</title>

    <!--bootstrap-->
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap/jquery.min.js"></script>
    <script src="/js/bootstrap/popper.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>

    <!--element-ui-->
    <!--<script src="/js/eui/elementUi.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="/css/eui/elementUi.css">-->

</head>

<body background="img/main.jpeg">

<div class="container" id="main">
    <h2>设备管理系统</h2>
    <!--搜索框部分-->
    <form id="searchTab" action="#" method="post" enctype="application/x-www-form-urlencoded"
          novalidate @submit.prevent="loadDevice(1)">

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">设备名称</span>
            </div>
            <input type="text" class="form-control" name="deviceName" placeholder="请输入">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="input-group-prepend">
                <span class="input-group-text">设备型号</span>
            </div>
            <input type="text" class="form-control" name="deviceModel" placeholder="请输入">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="input-group-prepend">
                <span class="input-group-text">品牌</span>
            </div>
            <input type="text" class="form-control" name="brand" placeholder="请输入">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">设备状态</span>
            </div>
            <!--<input type="text" class="form-control" name="status" placeholder="请输入">-->
            <select class="form-control" name="status">
                <option value="0">全部</option>
                <option value="1">已收回</option>
                <option value="2">已出库</option>
            </select>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="input-group-prepend">
                <span class="input-group-text">设备所在</span>
            </div>
            <input type="text" class="form-control" name="location" placeholder="请输入">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="input-group-prepend">
                <span class="input-group-text">类型</span>
            </div>
            <input type="text" class="form-control" name="type" placeholder="请输入">
        </div>
        <div class="input-group mb-3" style="margin-left: 480px">
            <button type="submit" class="btn btn-primary btn-sm">查询</button>
            &nbsp;&nbsp;&nbsp;
            <button type="reset" class="btn btn-primary btn-sm">重置</button>
        </div>
    </form>

    <!--分割线-->
    <hr>
    <!--按钮部分-->
    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addModal">添加设备</button>
    <button type="button" class="btn btn-danger btn-sm" @click="batch_delete()">批量删除</button>
    <br>
    <!--表格部分-->
    <table class="table">
        <thead>
        <tr>
            <th>
                全选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="form-check-input"
                                                                   v-model="selectAll" @click="onSelect()">
            </th>
            <th>设备名称</th>
            <th>型号</th>
            <th>品牌</th>
            <th>类型</th>
            <th>状态</th>
            <th>设备所在地</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="t in arr">
            <td style="text-align: center">
                <input type="checkbox" class="form-check-input" name="sel" v-bind:value="t.id" v-model="checkedIds">
            </td>
            <td>{{t.deviceName}}</td>
            <td>{{t.deviceModel}}</td>
            <td>{{t.brand}}</td>
            <td>{{t.type}}</td>
            <td v-if="t.status === 1">已收回</td>
            <td v-if="t.status === 2">已出库</td>
            <td>{{t.location}}</td>
            <td>
                <button data-toggle="modal" data-target="#outModal" @click="re_info(t.id)"
                        class="btn btn-danger btn-sm">设备出库
                </button>





                <button @click="back_device(t.id)" class="btn btn-dark btn-sm">设备收回</button>
                <button data-toggle="modal" data-target="#ModifyModal" @click="re_info(t.id)"
                        class="btn btn-dark btn-sm">设备修改
                </button>
                <button @click="delDevice(t.id)" class="btn btn-warning btn-sm">删除设备</button>
            </td>
        </tr>

        </tbody>
    </table>

    <hr/>
    <div style="margin-left: 400px;">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#" @click.prevent="loadDevice(pageInfo.prePage)">上一页</a>
            </li>

            <li class="page-item" v-for="n in pageInfo.navigatepageNums">
                <a class="page-link" href="#" v-text="n" @click.prevent="loadDevice(n)">1</a>
            </li>

            <li class="page-item"><a class="page-link" href="#" @click.prevent="loadDevice(pageInfo.nextPage)">下一页</a>
            </li>
        </ul>
    </div>


    <!--模态框部分-->
    <!-- 删除设备确认框（Modal） -->
    <div class="modal fade" id="delModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除设备</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="form-group">
                        <span>确认删除这条数据吗？</span>
                        <input type="hidden" v-model="a_deviceName" class="form-control" name="a_deviceName"
                               placeholder="输入名称" id="a_deviceName">
                    </div>

                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="addDevice()">提交</button>
                </div>

            </div>
        </div>
    </div>

    <!-- 新增设备模态框（Modal） -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">新增设备</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="form-group">
                        <label for="a_deviceName">设备名称:</label>
                        <input type="text" v-model="a_deviceName" class="form-control" name="a_deviceName"
                               placeholder="输入名称" id="a_deviceName">
                    </div>
                    <div class="form-group">
                        <label for="a_deviceModel">型号:</label>
                        <input type="text" v-model="a_deviceModel" class="form-control" name="a_deviceModel"
                               placeholder="输入型号" id="a_deviceModel">
                    </div>
                    <div class="form-group">
                        <label for="a_brand">品牌:</label>
                        <input type="text" v-model="a_brand" class="form-control" name="a_brand" placeholder="输入品牌"
                               id="a_brand">
                    </div>
                    <div class="form-group">
                        <label for="a_type">类型:</label>
                        <input type="text" v-model="a_type" class="form-control" name="a_type" placeholder="输入类型"
                               id="a_type">
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="addDevice()">提交</button>
                </div>

            </div>
        </div>
    </div>


    <!-- 设备修改模态框（Modal） -->
    <div class="modal fade" id="ModifyModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">设备修改</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">

                    <input type="hidden" v-model="mId">

                    <div class="form-group">
                        <label for="modDeviceName">设备名称:</label>
                        <input type="text" v-model="modDeviceName" class="form-control" name="modDeviceName"
                               placeholder="输入名称" id="modDeviceName">
                    </div>

                    <div class="form-group">
                        <label for="modDeviceModel">型号:</label>
                        <input type="text" v-model="modDeviceModel" class="form-control" name="modDeviceModel"
                               placeholder="输入型号" id="modDeviceModel">
                    </div>

                    <div class="form-group">
                        <label for="modBrand">品牌:</label>
                        <input type="text" v-model="modBrand" class="form-control" name="modBrand"
                               placeholder="输入品牌" id="modBrand">
                    </div>

                    <div class="form-group">
                        <label for="modType">类型:</label>
                        <input type="text" v-model="modType" class="form-control" name="modType"
                               placeholder="输入类型" id="modType">
                    </div>


                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="modify_device()">
                        提交
                    </button>
                </div>

            </div>
        </div>
    </div>


    <!-- 设备出库模态框（Modal） -->
    <div class="modal fade" id="outModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">设备出库</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <input type="hidden" v-model="mId">
                    <div class="form-group">
                        <label for="outLocation">设备去向:</label>
                        <input type="text" v-model="outLocation" class="form-control" name="outLocation"
                               placeholder="输入城市" id="outLocation">
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="out_device(id,location)">
                        提交
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>


<!--引入axios框架-->
<script src="/js/vue/axios.min.js"></script>
<!--引入Vue框架-->
<script src="/js/vue/vue.js"></script>

<script>

    //在页面加载完毕时，获取列表信息
    let v = new Vue({
        el: "#main",
        data: {
            arr: [],
            pageInfo: {},
            pageNum: 1,
            pageSize: 10,
            mId: null,
            outLocation: null,    //设备去向
            modDeviceName: null,
            modDeviceModel: null,
            modBrand: null,
            modType: null,
            a_deviceName: null,
            a_deviceModel: null,
            a_brand: null,
            a_type: null,
            selectAll: false,
            checkedIds: []
        },
        methods: {
            //批量删除
            batch_delete: function () {
                console.log("批量删除--：" + v.checkedIds);
                let ids = "";
                if (v.checkedIds.length !== 0) {
                    for (let i = 0; i < v.checkedIds.length; i++) {
                        ids += v.checkedIds[i] + ",";
                    }
                    console.log("ids--: " + ids);
                    axios.delete("/exam/deviceInfo/deleteBatch/" + ids).then(function () {
                        v.loadDevice(this.pageNum);
                    })
                } else {
                    console.log("无需任何操作");
                }

            },

            //移除设备
            delDevice: function (id) {
                axios.delete("/exam/deviceInfo/delete/" + id).then(function (response) {
                    v.loadDevice(this.pageNum);
                })
            },

            //添加设备
            addDevice: function () {
                let data = new Object();
                data.deviceName = v.a_deviceName;
                data.deviceModel = v.a_deviceModel;
                data.brand = v.a_brand;
                data.type = v.a_type;
                axios.post("/exam/deviceInfo/add", data)
                    .then(function (response) {
                        console.log("插入数据");
                        v.loadDevice(this.pageNum);
                    })
            },

            //设备列表
            loadDevice: function (pageNum) {
                //发请求到后台获取商品信息
                let num;
                if (!pageNum) {
                    num = this.pageNum;
                } else {
                    num = pageNum;
                    this.pageNum = pageNum;
                }
                let form = new FormData(document.querySelector("form"));
                console.log(form.toString());
                let size = this.pageSize;
                axios.post("/exam/deviceInfo/list/" + num + "/" + size, form)
                    .then(function (response) {
                        console.log("成功加载数据");
                        v.arr = response.data.data.list;
                        v.pageInfo = response.data.data;
                    })
            },

            //设备信息的反显
            re_info: function (id) {
                axios.get("/exam/deviceInfo/" + id)
                    .then(function (response) {
                        console.log("设备出库的反显");
                        v.mId = response.data.data.id;
                        //设备出库时，反显的设备去向
                        v.outLocation = response.data.data.location;
                        //设备修改时，反显修改之前设备的信息
                        v.modDeviceName = response.data.data.deviceName;
                        v.modDeviceModel = response.data.data.deviceModel;
                        v.modBrand = response.data.data.brand;
                        v.modType = response.data.data.type;
                    });
            },

            //设备修改
            modify_device: function () {
                let data = new Object();
                data.id = v.mId;
                data.deviceName = v.modDeviceName;
                data.deviceModel = v.modDeviceModel;
                data.brand = v.modBrand;
                data.type = v.modType;
                axios.post("/exam/deviceInfo/update", data).then(function (response) {
                    console.log("设备信息更新成功");
                    //异步刷新页面
                    v.loadDevice(this.pageNum);
                })

            },

            //设备出库
            out_device: function () {
                axios.get("/exam/deviceInfo/modify/" + v.mId + "/" + v.outLocation)
                    .then(function (response) {
                        console.log("设备出库成功");
                        v.loadDevice(this.pageNum);
                    });
            },

            //设备收回
            back_device: function (id) {
                axios.get("/exam/deviceInfo/delete/" + id)
                    .then(function (response) {
                        console.log("设备收回成功");
                        v.loadDevice(this.pageNum);
                    });
            },
            //全选、取消全选
            onSelect: function () {
                console.log(v.checkedIds);
                if (v.selectAll) {
                    //实现反选
                    v.checkedIds = [];
                } else {
                    //实现全选
                    v.checkedIds = [];
                    v.arr.forEach(function (t) {
                        v.checkedIds.push(t.id);
                    });
                }
            }
        },
        /*当页面加载完毕时，会自动调用这个方法（vue对象的生命周期方法）*/
        created: function () {
            //加载设备列表
            this.loadDevice(this.pageNum);
        }
    });

    //监听变化
    v.$watch('selectAll', function (nval, oval) {
        if (v.checkedIds.length === v.arr.length && v.arr.length !== 0) {
            v.selectAll = true;
        } else {
            v.selectAll = false;
        }
    });
</script>


</body>
</html>